<template>
	<view class="content">
		<view class="selectbox">
			选择发票类型
		</view>
		<view class="choice">
			<view class="" style="line-height: 100rpx;margin-left: 42rpx;">
				<u-radio-group v-model="value">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="selectbox">
			收票人信息
		</view>
		<view class="" v-if="statuss">
			<view class="disclose">
				<view class="look">
					发票抬头
				</view>
				<u-input v-model="name" placeholder='请输入发票抬头' type="text" />
			</view>
			<view class="disclose">
				<view class="look">
					税号
				</view>
				<u-input v-model="tax_no" placeholder='请输入税号' type="text" />
			</view>
			<view class="disclose">
				<view class="look">
					银行账号
				</view>
				<u-input v-model="bank_no" placeholder='请输入银行账号' type="number" />
			</view>
			<view class="disclose">
				<view class="look">
					注册地址
				</view>
				<u-input v-model="reg_address" placeholder='请输入注册地址' type="text" />
			</view>
			<view class="disclose">
				<view class="look">
					电话
				</view>
				<u-input v-model="phone" placeholder='请输入电话' type="number" />
			</view>
		</view>

		<view class="" v-else>
			<view class="disclose">
				<view class="look">
					发票抬头
				</view>
				<u-input v-model="peoName" placeholder='请输入发票抬头' type="text" />
			</view>
		</view>

		<view class="hint">
			发票金额为实际支付金额，不含虚拟资产，优惠等扣减金额。
		</view>

		<button class="btn" @click='submitAdd'>保存</button>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				list: [{
						name: '单位',
						disabled: false
					},
					{
						name: '个人',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '单位',
				name: '',
				bank_no: '',
				tax_no: '',
				reg_address: '',
				phone: '',
				peoName: '',
				status: '',
				statuss: true,
			};
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.status = e
				if (this.status == '单位') {
					this.statuss = true
				} else {
					this.statuss = false
				}
			},
			// 添加发票
			async submitAdd() {
				if (this.value == '单位') {
					let type = '1'
					let {
						name,
						bank_no,
						tax_no,
						reg_address,
						phone
					} = this
					if (!name || !bank_no || !tax_no || !reg_address || !phone) {
						uni.showToast({
							title: '发票信息不完整',
							icon: 'none'
						})
						return
					}
					if (!this.$u.test.mobile(phone)) {
						uni.showToast({
							title: '手机号有误',
							icon: 'none'
						})
						return
					}
					let res = await myRequest.addInvoice({
						name: name,
						bank_no: bank_no,
						tax_no: tax_no,
						reg_address: reg_address,
						phone: phone,
						type: type
					})
					if (res.status) {
						uni.showToast({
							title: '添加成功'
						})
						this.$store.commit('changeInvoiceId',res.invoice_id)
						uni.navigateTo({
							url: '../order/order'
						})
					}
				} else {
					let type = '0'
					let {
						peoName
					} = this
					if (!peoName) {
						uni.showToast({
							title: '发票信息不完整',
							icon: 'none'
						})
						return
					}
					let res = await myRequest.addInvoice({
						name: peoName,
						type: type
					})
					if (res.status) {
						uni.showToast({
							title: '添加成功'
						})
						this.$store.commit('changeInvoiceId',res.invoice_id)
						uni.navigateTo({
							url: '../order/order'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 694rpx;
		margin: auto;

		.selectbox {
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 34rpx;
			color: #333333;
			opacity: 1;
			margin-top: 32rpx;
		}

		.choice {
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 16rpx;
			margin-top: 18rpx;
		}

		/deep/.u-radio:nth-child(2) {
			margin-left: 80rpx;
		}

		.disclose {
			width: 694rpx;
			height: 176rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 16rpx;
			margin-top: 18rpx;

			.look {
				height: 88rpx;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				line-height: 34rpx;
				color: #333333;
				opacity: 1;
				padding: 20rpx 0 0 20rpx;
			}

			.u-input {
				text-indent: 20rpx;
			}
		}

		.hint {
			font-size: 24rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 28rpx;
			color: #666666;
			margin: 34rpx 0 0 20rpx;
		}

		.btn {
			width: 660rpx;
			height: 100rpx;
			background: linear-gradient(180deg, #50A3FE 0%, #3064FC 100%);
			border-radius: 16rpx;
			margin-top: 88rpx;
			margin-bottom: 40rpx;
			color: #FFFFFF;
		}

	}
</style>
